<template>
  <div>
    <el-form 
      :rules="validateRules" 
      ref="extDataForm" 
      :model="dataInfo" 
      label-width="110px" 
      style='width:400px;'
    >
      <template v-for="(item, index) in listData">
        <el-form-item :label="item.label" :prop="item.name">
          <!-- 单行文本 -->
          <template v-if="item.type === 'INPUT'">
            <el-input type="text" v-model="dataInfo[item.name]" :placeholder="item.placeholder"></el-input>
          </template>
          <!-- 多行文本 -->
          <template v-if="item.type === 'TEXT_AREA'">
            <el-input type="textarea" v-model="dataInfo[item.name]" :placeholder="item.placeholder"></el-input>
          </template>
          <!-- select下拉框 -->
          <template v-if="item.type === 'SELECT'">
            <el-select v-model="dataInfo[item.name]" :placeholder="item.placeholder">
              <template v-for="(item, index) in setList[item.name]">
                <el-option :label="item.label" :value="item.value"></el-option>
              </template>
            </el-select>
          </template>
          <!-- radio 单选 -->
          <template v-if="item.type === 'RADIO'">
            <el-radio-group v-model="dataInfo[item.name]">
              <template v-for="(item, index) in setList[item.name]">
                <el-radio :label="item.value">{{item.label}}</el-radio>
              </template>
            </el-radio-group>
          </template>
          <!-- checkbox 多选 -->
          <template v-if="item.type === 'CHECK_BOX'">
            <el-checkbox-group v-model="dataInfo[item.name]">
              <template v-for="(item, index) in setList[item.name]">
                <el-checkbox :label="item.value">{{item.label}}</el-checkbox>
              </template>
            </el-checkbox-group>
          </template>
          <!-- date 选择日子 -->
          <template v-if="item.type === 'DATE'">
            <el-date-picker
              v-model="dataInfo[item.name]"
              type="date"
              value-format="yyyy-MM-dd"
              :placeholder="item.placeholder">
            </el-date-picker>
          </template>
          <!-- time 选择时分秒子 -->
          <template v-if="item.type === 'TIME'">
            <el-time-picker
              v-model="dataInfo[item.name]"
              :picker-options="{
                selectableRange: '00:00:00 - 23:59:59'
              }"
              value-format="HH:mm:ss"
              :placeholder="item.placeholder">
            </el-time-picker>
          </template>
          <!-- data-time 选择年月日时分秒子 -->
          <template v-if="item.type === 'DATE_TIME'">
            <el-date-picker
              v-model="dataInfo[item.name]"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              :placeholder="item.placeholder">
            </el-date-picker>
          </template>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>
<script>

export default {
  name: 'ext-field-comp',
  data() {
    return {
      listData: [], // 扩展字段配置列表
      // 表单数据
      dataInfo: {},
      // 存放模型内配置的select，checkbox，radio的选项列表
      setList: {},
      // 表单校验规则
      validateRules: {}
    }
  },
  props: {
    // 扩展字段配置列表
    extListData: {
      type: Array,
      default: []
    }
  },
  created() {
    // 初始化扩展信息
    this.initExtField()
  },
  mounted() {
  },
  methods: {
    // 触发扩展表单校验
    validateField() {
      const p = new Promise((resolve, reject) => {
        this.$refs['extDataForm'].validate((valid) => {
          if (valid) {
            resolve() // 通过校验
          } else {
            reject() // 未通过校验
          }
        })
      })
      return p
    },
    // 获取结果子
    getResult() {
      const dataInfoLen = Object.keys(this.dataInfo).length
      const resData = {}
      if (dataInfoLen) {
        for (const i in this.dataInfo) {
          // 值为数组类型
          if (Array.isArray(this.dataInfo[i])) {
            resData[i] = (this.dataInfo[i]).join(',')
          } else {
            resData[i] = this.dataInfo[i]
          }
        }
      }
      return resData
    },
    // 获取扩展字段校验规则子
    getValidateRules() {
      return this.validateRules
    },
    // 初始化扩展信息
    initExtField() {
      // 遍历扩展字段列表
      for (const item of this.extListData) {
        // 处理队列
        switch (item.type) {
          case 'CHECK_BOX': {
            // 构造设置的选项
            const setList = this.constrSetList(item.selectedValues)
            // 初始化选项
            this.$set(this.setList, `${item.name}`, setList)
            // 处理默认值
            const vdefault = (item.defaultValue === '') ? [] : (item.defaultValue).split(',')
            this.$set(this.dataInfo, item.name, vdefault)
            break
          }
          case 'SELECT': {
            // 构造设置的选项
            const setList = this.constrSetList(item.selectedValues)
            // 初始化选项
            this.$set(this.setList, `${item.name}`, setList)
            // 处理默认值
            const vdefault = item.defaultValue
            this.$set(this.dataInfo, item.name, vdefault)
            break
          }
          case 'RADIO': {
            // 构造设置的选项
            const setList = this.constrSetList(item.selectedValues)
            // 初始化选项
            this.$set(this.setList, `${item.name}`, setList)
            // 处理默认值
            const vdefault = item.defaultValue
            this.$set(this.dataInfo, item.name, vdefault)
            break
          }
          default: {
            // 处理默认值
            const vdefault = item.defaultValue
            this.$set(this.dataInfo, item.name, vdefault)
          }
        }
        // 塞入展示队列
        this.$nextTick(function() {
          this.listData.push(item)
          // 初始化校验规则
          this.initValidateRules(item)
        })
      }
    },
    // 构造设置的选项
    constrSetList(obj) {
      // 处理设置的选项
      const setList = [] //初始化选项
      for (const item of obj) {
        const itemTemp = item.split(':') // 用分号，切割后的数组
        const setItem = {}
        setItem.label = itemTemp[1]
        setItem.value = itemTemp[0]
        setList.push(setItem)
      }
      return setList
    },
    // 初始化校验规则
    initValidateRules(item) {
      const ruleItem = []
      // 是否必填
      if (item.required === true) {
        ruleItem.push({
          required: true,
          trigger: 'change',
          message: '请填写' + item.label
        })
      }
      // 正则校验
      if (item.regexArray.length > 0) {
        const ruleItemReg = {}
        ruleItemReg.regexArray = item.regexArray
        ruleItemReg.trigger = 'change'
        ruleItemReg.validator = function(rule, value, callback) {
          for (const regexItem of rule.regexArray) {
            const regex = new RegExp(regexItem.regex)
            if ((value !== '') && regex.test(value) === false) {
              callback(new Error(regexItem.tips))
              break
            } else {
              callback()
            }
          }
        }
        ruleItem.push(ruleItemReg)
      }

      if (ruleItem.length > 0) {
        this.validateRules[item.name] = ruleItem
      }
    }
  }
}
</script>
<style scoped>
</style>
